<template>
  <div>
    <h3>权益列表</h3>

    <table border="1">
      <tbody>
        <tr>
          <td><input type="checkbox"></td>
          <td>用户名</td>
          <td>图片</td>
          <td>操作</td>
        </tr>
        <tr v-for="item in list">
            <td><input type="checkbox"></td>
          <td>{{ item.qname }}</td>
          <td>
            <img  :src="'https://localhost:7299'+item.qphoto" alt="" width="70" height="70">
          </td>
          <td>
            <input type="button" value="分配权益" @click="QA(item.qid)">
          </td>
        </tr>
      </tbody>
    </table>
    <div>
      <span>总页数：{{ totalPage }}</span>
      <span>总条数：{{ totalCount }}</span>

      <span>每页{{ queryInfo.pageIndex }}/{{ totalPage }}条</span>

      <input type="button" value="首页" @click="goPage('home')" />
      <input type="button" value="上一页" @click="goPage('prev')" />
      <input type="button" value="下一页" @click="goPage('next')" />
      <input type="button" value="尾页" @click="goPage('end')" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import axios from "axios";
import moment from "moment";

const route = useRoute();
const router = useRouter();

let data: any = reactive({
  queryInfo: {
    pageIndex: 1,
    pageSize: 2,
  },
  list: [],
  totalCount: 0,
  totalPage: 0,
});

let { queryInfo, list, totalCount, totalPage } = toRefs(data);

const QA=()=>{
router.push('QAdd');

}


onMounted(() => {
  getList();
});

//分页

const goPage = (str: any) => {
  switch (str) {
    case "home":
      if (queryInfo.value.pageIndex == 1) {
        alert("已经到第一页了");
        return;
      }
      queryInfo.value.pageIndex = 1;
      break;

    case "prev":
      if (queryInfo.value.pageIndex == 1) {
        alert("已经到第一页了");
        return;
      }
      queryInfo.value.pageIndex--;
      break;

    case "next":
      if (queryInfo.value.pageIndex == totalPage.value) {
        alert("已经到最后一页了");
        return;
      }
      queryInfo.value.pageIndex++;
      break;
    case "end":
      if (queryInfo.value.pageIndex == totalPage.value) {
        alert("已经到最后一页了");
        return;
      }
      queryInfo.value.pageIndex = totalPage.value;
      break;

      
  }

  getList();
};


//获取列表
const getList = () => {
  let obj = {
    pageIndex: queryInfo.value.pageIndex,
    pageSize: queryInfo.value.pageSize,
  };
  axios({
    url: "/api/quany/GetQ",
    method: "get",
    params: obj,
  })
    .then((res) => {
      console.log(res);
      list.value = res.data.data;
      totalCount.value = res.data.totalCount;
      totalPage.value = res.data.totalPage;
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>
